<template>
  <view 
    v-if="visible" 
    class="pet-info-panel"
    @click.stop=""
  >
    <!-- 装饰性背景 -->
    <view class="panel-background">
      <view class="bg-decoration bg-decoration-1"></view>
      <view class="bg-decoration bg-decoration-2"></view>
      <view class="bg-decoration bg-decoration-3"></view>
    </view>
    
    <!-- 头部区域 -->
    <view class="info-header">
      <view class="pet-avatar-section">
        <view class="pet-avatar-mini">
          <image 
            v-if="petData.avatar" 
            :src="petData.avatar" 
            class="pet-image-mini"
            mode="aspectFit"
          />
          <text v-else class="pet-emoji-mini">{{ petData.emoji }}</text>
          <view class="level-badge">Lv.{{ petData.level }}</view>
        </view>
      </view>
      <view class="pet-info-title">
        <text class="pet-name">{{ petData.name }}</text>
        <text class="pet-subtitle">{{ getPetSubtitle() }}</text>
      </view>
      <view class="close-btn" @click="$emit('close')">
        <text class="close-icon">✕</text>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <view class="info-content">
      <!-- 经验进度条 -->
      <view class="exp-section">
        <view class="exp-header">
          <text class="exp-label">经验值</text>
          <text class="exp-value">{{ petData.exp }}/{{ petData.maxExp }}</text>
        </view>
        <view class="exp-progress-bar">
          <view 
            class="exp-progress-fill" 
            :style="{ width: getExpPercentage() + '%' }"
          ></view>
          <view class="exp-sparkle" v-if="getExpPercentage() > 80">✨</view>
        </view>
      </view>
      
      <!-- 状态卡片 -->
      <view class="status-cards">
        <view class="status-card mood-card">
          <view class="card-icon">😊</view>
          <view class="card-content">
            <text class="card-label">心情</text>
            <view class="card-progress">
              <view 
                class="card-progress-fill mood-fill" 
                :style="{ width: petData.mood + '%' }"
              ></view>
            </view>
            <text class="card-value">{{ petData.mood }}%</text>
          </view>
          <view class="card-status" :class="getMoodStatus()"></view>
        </view>
        
        <view class="status-card hunger-card">
          <view class="card-icon">🍽️</view>
          <view class="card-content">
            <text class="card-label">饥饿</text>
            <view class="card-progress">
              <view 
                class="card-progress-fill hunger-fill" 
                :style="{ width: petData.hunger + '%' }"
              ></view>
            </view>
            <text class="card-value">{{ petData.hunger }}%</text>
          </view>
          <view class="card-status" :class="getHungerStatus()"></view>
        </view>
        
        <view class="status-card energy-card">
          <view class="card-icon">⚡</view>
          <view class="card-content">
            <text class="card-label">精力</text>
            <view class="card-progress">
              <view 
                class="card-progress-fill energy-fill" 
                :style="{ width: petData.energy + '%' }"
              ></view>
            </view>
            <text class="card-value">{{ petData.energy }}%</text>
          </view>
          <view class="card-status" :class="getEnergyStatus()"></view>
        </view>
      </view>
      
      <!-- 交互按钮 -->
      <view class="action-buttons">
        <button 
          class="action-btn feed-btn" 
          @click="$emit('feed')"
          :disabled="petData.hunger >= 100"
          :class="{ 'btn-disabled': petData.hunger >= 100 }"
        >
          <text class="btn-icon">🍎</text>
          <text class="btn-text">喂食</text>
          <view class="btn-effect"></view>
        </button>
        <button 
          class="action-btn play-btn" 
          @click="$emit('play')"
          :disabled="petData.energy < 10"
          :class="{ 'btn-disabled': petData.energy < 10 }"
        >
          <text class="btn-icon">🎮</text>
          <text class="btn-text">玩耍</text>
          <view class="btn-effect"></view>
        </button>
        <button 
          class="action-btn rest-btn" 
          @click="$emit('rest')"
          :disabled="petData.energy >= 100"
          :class="{ 'btn-disabled': petData.energy >= 100 }"
        >
          <text class="btn-icon">😴</text>
          <text class="btn-text">休息</text>
          <view class="btn-effect"></view>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PetInfoPanel',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    petData: {
      type: Object,
      required: true
    }
  },
  emits: ['close', 'feed', 'play', 'rest'],
  methods: {
    // 获取宠物副标题
    getPetSubtitle() {
      if (this.petData.mood >= 80) return '非常开心'
      if (this.petData.mood >= 60) return '心情不错'
      if (this.petData.mood >= 40) return '一般般'
      if (this.petData.mood >= 20) return '有点不开心'
      return '心情很差'
    },
    
    // 获取经验百分比
    getExpPercentage() {
      return Math.round((this.petData.exp / this.petData.maxExp) * 100)
    },
    
    // 获取心情状态
    getMoodStatus() {
      if (this.petData.mood >= 80) return 'status-excellent'
      if (this.petData.mood >= 60) return 'status-good'
      if (this.petData.mood >= 40) return 'status-normal'
      if (this.petData.mood >= 20) return 'status-poor'
      return 'status-bad'
    },
    
    // 获取饥饿状态
    getHungerStatus() {
      if (this.petData.hunger >= 80) return 'status-excellent'
      if (this.petData.hunger >= 60) return 'status-good'
      if (this.petData.hunger >= 40) return 'status-normal'
      if (this.petData.hunger >= 20) return 'status-poor'
      return 'status-bad'
    },
    
    // 获取精力状态
    getEnergyStatus() {
      if (this.petData.energy >= 80) return 'status-excellent'
      if (this.petData.energy >= 60) return 'status-good'
      if (this.petData.energy >= 40) return 'status-normal'
      if (this.petData.energy >= 20) return 'status-poor'
      return 'status-bad'
    }
  }
}
</script>

<style scoped>
/* 信息面板（仅PC端） */
.pet-info-panel {
  position: absolute;
  bottom: 120%;
  right: 0;
  width: 420rpx;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
  border-radius: 24rpx;
  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15), 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid rgba(255, 255, 255, 0.8);
  overflow: hidden;
  z-index: 999998;
  backdrop-filter: blur(10rpx);
  animation: panelSlideIn 0.3s ease-out;
}

/* 装饰性背景 */
.panel-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-decoration {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
  animation: float 6s ease-in-out infinite;
}

.bg-decoration-1 {
  width: 120rpx;
  height: 120rpx;
  top: -60rpx;
  right: -60rpx;
  animation-delay: 0s;
}

.bg-decoration-2 {
  width: 80rpx;
  height: 80rpx;
  bottom: -40rpx;
  left: -40rpx;
  animation-delay: 2s;
}

.bg-decoration-3 {
  width: 60rpx;
  height: 60rpx;
  top: 50%;
  left: -30rpx;
  animation-delay: 4s;
}

/* 头部区域 */
.info-header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 24rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  overflow: hidden;
}

.pet-avatar-section {
  margin-right: 16rpx;
}

.pet-avatar-mini {
  position: relative;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5rpx);
}

.pet-image-mini {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.pet-emoji-mini {
  font-size: 32rpx;
}

.level-badge {
  position: absolute;
  bottom: -8rpx;
  right: -8rpx;
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
  color: white;
  font-size: 16rpx;
  font-weight: bold;
  padding: 4rpx 8rpx;
  border-radius: 12rpx;
  border: 2rpx solid white;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.pet-info-title {
  flex: 1;
}

.pet-name {
  font-size: 28rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 4rpx;
}

.pet-subtitle {
  font-size: 20rpx;
  opacity: 0.9;
  display: block;
}

.close-btn {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(5rpx);
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.close-icon {
  font-size: 20rpx;
  font-weight: bold;
}

/* 内容区域 */
.info-content {
  padding: 24rpx;
  position: relative;
}

/* 经验进度条 */
.exp-section {
  margin-bottom: 24rpx;
}

.exp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.exp-label {
  font-size: 22rpx;
  color: #666;
  font-weight: 500;
}

.exp-value {
  font-size: 20rpx;
  color: #999;
  font-weight: bold;
}

.exp-progress-bar {
  position: relative;
  height: 12rpx;
  background: linear-gradient(90deg, #e0e0e0, #f0f0f0);
  border-radius: 6rpx;
  overflow: hidden;
  box-shadow: inset 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
}

.exp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 6rpx;
  transition: width 0.5s ease;
  position: relative;
}

.exp-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

.exp-sparkle {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  font-size: 16rpx;
  animation: sparkle 1.5s ease-in-out infinite;
}

/* 状态卡片 */
.status-cards {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.status-card {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16rpx;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16rpx;
  border: 1rpx solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(5rpx);
  transition: all 0.3s ease;
  overflow: hidden;
}

.status-card:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.card-icon {
  font-size: 32rpx;
  margin-right: 16rpx;
  width: 40rpx;
  text-align: center;
}

.card-content {
  flex: 1;
}

.card-label {
  font-size: 20rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
  font-weight: 500;
}

.card-progress {
  height: 8rpx;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4rpx;
  overflow: hidden;
  margin-bottom: 6rpx;
}

.card-progress-fill {
  height: 100%;
  border-radius: 4rpx;
  transition: width 0.5s ease;
  position: relative;
}

.mood-fill {
  background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
}

.hunger-fill {
  background: linear-gradient(90deg, #ffa726, #ffb74d);
}

.energy-fill {
  background: linear-gradient(90deg, #42a5f5, #64b5f6);
}

.card-value {
  font-size: 18rpx;
  color: #333;
  font-weight: bold;
}

.card-status {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  margin-left: 12rpx;
}

.status-excellent {
  background: #4caf50;
  box-shadow: 0 0 8rpx rgba(76, 175, 80, 0.5);
}

.status-good {
  background: #8bc34a;
  box-shadow: 0 0 6rpx rgba(139, 195, 74, 0.4);
}

.status-normal {
  background: #ff9800;
  box-shadow: 0 0 4rpx rgba(255, 152, 0, 0.3);
}

.status-poor {
  background: #ff5722;
  box-shadow: 0 0 4rpx rgba(255, 87, 34, 0.3);
}

.status-bad {
  background: #f44336;
  box-shadow: 0 0 6rpx rgba(244, 67, 54, 0.4);
  animation: pulse 2s infinite;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 12rpx;
}

.action-btn {
  position: relative;
  flex: 1;
  padding: 16rpx 20rpx;
  border: none;
  border-radius: 12rpx;
  font-size: 22rpx;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
}

.feed-btn {
  background: linear-gradient(135deg, #4caf50, #66bb6a);
  color: white;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
}

.play-btn {
  background: linear-gradient(135deg, #ff9800, #ffb74d);
  color: white;
  box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.3);
}

.rest-btn {
  background: linear-gradient(135deg, #2196f3, #42a5f5);
  color: white;
  box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
}

.btn-icon {
  font-size: 20rpx;
}

.btn-text {
  font-size: 20rpx;
}

.btn-effect {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.action-btn:not(.btn-disabled):hover .btn-effect {
  left: 100%;
}

.action-btn:not(.btn-disabled):active {
  transform: scale(0.95);
}

.btn-disabled {
  background: linear-gradient(135deg, #e0e0e0, #f5f5f5) !important;
  color: #999 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* 动画效果 */
@keyframes panelSlideIn {
  from {
    opacity: 0;
    transform: translateY(20rpx) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20rpx) rotate(180deg);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes sparkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* 响应式调整 */
@media screen and (max-width: 750rpx) {
  .pet-info-panel {
    width: 360rpx;
  }
  
  .info-content {
    padding: 20rpx;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .status-cards {
    gap: 12rpx;
  }
}
</style>
